<template>
  <nut-popup
      position="bottom"
      :visible="props.show"
      @click-overlay="close"
      @click-close-icon="close"
      :safe-area-inset-bottom="true"
      :round="true"
      :z-index="props.zIndex"
      :overlay="props.overlay"
      :close-on-click-overlay="true"
  >
    <view class="toptools" :class="{'show_border':props.showBorder}" v-if="props.showClose">
      <view class="title">{{props.title}}</view>
      <view class="close" @click="close">×</view>
    </view>
    <view class="toptools_1" :class="{'show_border':props.showBorder}" v-else>
      <view class="title">{{props.title}}</view>
    </view>
    <slot></slot>
  </nut-popup>
</template>

<script lang="ts" setup>
import { ref , defineProps, defineEmits, withDefaults } from "vue";
const props = withDefaults(
    defineProps<{
      show: boolean
      title: string
      round: boolean
      zIndex: number
      overlay: boolean
      closeOnClickOverlay: boolean,
      showClose: boolean,
      showBorder: boolean,
    }>(),
    {
      show: false,
      title: '提示',
      round: true,
      zIndex: 20,
      overlay: true,
      closeOnClickOverlay: true,
      showClose: false,
      showBorder: true,
    }
)
const emit = defineEmits<{
  //(e: 'close', args: boolean)
  (e: 'close')
}>()

function close() {
  emit('close')
}
</script>

<style lang="scss">
.toptools {
  height: 112rpx;
  background-color: #fff;
  width: calc(100% - 48rpx);
  display: flex;
  padding: 0 24rpx;
  justify-content: space-between;
  align-items: center;
  color: #252525;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    width: 500rpx;
  }
  .close {
    font-size: 40rpx;
    width: 30rpx;
  }

}
.toptools_1 {
  height: 112rpx;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #252525;
  .title {
    font-size: 32rpx;
    font-weight: bold;
    width: 100%;
    text-align: center;
  }
}
.show_border {
  border-bottom: 16rpx #f5f5f5 solid;
}

</style>
